<template>
  <div class="generate-qrcode">
    <!-- 头部 -->
    <div class="app-main-content-box">
      <app-main-title :title="'管理批次二维码'+'：'+taskTitle" />
      <div class="flexRBC">
        <div class="list-search">
          <el-input
            v-model="filterForm.codeList[0]"
            placeholder="请输入码编号"
            class="input-with-select"
            @keyup.enter.native="searchByKeyword"
          />
          <el-button
            type="primary"
            size="medium"
            round
            icon="el-icon-search"
            :loading="searchLoading"
            @click="searchByKeyword"
          >查 询</el-button>
        </div>
        <div>
          <el-dropdown
            v-if="!$store.getters.banBtnList.includes('MCH_BTN_GENERATE_QRCODE_MANAGE')"
            type="primary"
            size="medium"
            @command="handleDown($event)"
          >
            <el-button type="primary" size="medium" round>
              下载码
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="all">下载全部</el-dropdown-item>
              <el-dropdown-item :command="1">下载已绑定</el-dropdown-item>
              <el-dropdown-item :command="0">下载未绑定</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button size="medium" round @click="goBack">返回</el-button>
        </div>
      </div>
    </div>

    <div class="app-main-content-box content">
      <!-- 筛选 -->
      <div class="app-main-filter-collapse-box">
        <el-collapse>
          <el-collapse-item title="按条件筛选" name="1">
            <div>
              <el-form ref="filterForm" :model="filterForm" label-width="120px" size="small">
                <el-form-item label="绑定状态：" prop="bindStatus">
                  <el-radio-group v-model="filterForm.bindStatus">
                    <el-radio label="all">全部</el-radio>
                    <el-radio :label="0">未绑定</el-radio>
                    <el-radio :label="1">已绑定</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" round @click="submitForm('filterForm')">筛 选</el-button>
                  <el-button round @click="resetForm('filterForm')">重 置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 表格内容 -->
      <div class="list-table">
        <el-table
          v-loading="tableLoading"
          :data="list"
          border
          stripe
          style="width: 100%"
          size="small"
          empty-text="暂无数据"
        >
          <el-table-column prop="code" label="编号" fixed />
          <el-table-column prop="codeType" label="类型">
            <template slot-scope="scope">{{ codeTypeOptions[scope.row.codeType] }}</template>
          </el-table-column>
          <el-table-column prop="bizType" label="功能">
            <template slot-scope="scope">{{ bizTypeOptions[scope.row.bizType] }}</template>
          </el-table-column>
          <el-table-column prop="bindStatus" label="绑定状态">
            <template slot-scope="scope"><span :class="{'app-text-color-success':scope.row.bindStatus===1}">{{ bindStatusOptions[scope.row.bindStatus] }}</span></template>
          </el-table-column>
          <el-table-column prop="bizRemark" label="绑定信息" />
          <el-table-column prop="updateTime" label="绑定时间">
            <template slot-scope="scope">{{ scope.row.bindStatus===1?scope.row.updateTime:"" }}</template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="openQrcode(scope.row)">二维码</el-button>
              <el-button
                v-if="scope.row.bindStatus===1&&!$store.getters.banBtnList.includes('MCH_BTN_GENERATE_QRCODE_MANAGE')"
                type="text"
                size="small"
                @click="unbind(scope.row)"
              >解除绑定</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total!==0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
    </div>

    <!-- 二维码 -->
    <DialogQrcode ref="dialogQrcode" />
  </div>
</template>

<script>
import DialogQrcode from './DialogQrcode'
import { qrcodeList, unbindQrcode } from '@/api/wxCode'
import { downWxQrcodeList } from '@/api/download'
export default {
  components: {
    DialogQrcode
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        // 分页配置
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      codeTypeOptions: {
        0: '普通链接二维码'
      },
      bizTypeOptions: {
        1: '点餐桌台',
        2: '军博娱乐'
      },
      bindStatusOptions: {
        0: '未绑定',
        1: '已绑定'
      },
      statusOptions: {
        0: '已停用',
        1: '启用中'
      },
      // 状态
      tableLoading: false, // 表格loading
      searchLoading: false,
      // 数据
      list: [], // 表格数据
      taskTitle: '',
      filterForm: {
        taskNo: '',
        codeList: [''],
        bindStatus: 'all'
      },
      filterType: 'all'
    }
  },
  mounted() {},
  methods: {
    /**
       *  获取数据
       */
    // open
    open(row) {
      this.filterForm.taskNo = row.taskNo
      this.taskTitle = row.title
      this.initData()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    // 获取列表
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      this.filterForm.pageNum = page
      this.filterForm.pageSize = pageSize
      const params = Object.assign({}, this.filterForm)
      // 如果是key搜索 删除多余字段
      if (this.filterType === 'key' && params.codeList[0] !== '') {
        delete params.bindStatus
        delete params.taskNo
      } else {
        delete params.codeList
      }
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      this.tableLoading = true
      qrcodeList(params)
        .then(res => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.tableLoading = false
          this.searchLoading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    /**
       * 按钮组
       */
    // 点击搜索
    searchByKeyword() {
      this.searchLoading = true
      this.filterType = 'key'
      this.initData(1)
    },

    // 筛选
    submitForm() {
      this.filterType = 'all'
      this.initData(1)
    },

    // 打开二维码
    openQrcode(row) {
      this.$refs.dialogQrcode.open({
        taskTitle: this.taskTitle,
        codeNo: row.code
      })
    },

    //  解绑
    unbind(row) {
      this.$confirm(`解除二维码【${row.code}】的绑定关系?`, '提示', {
        confirmButtonText: '解除',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      })
        .then(() => {
          this.tableLoading = true
          unbindQrcode({ codeNo: row.code })
            .then(res => {
              row.bindStatus = 0
              row.bizRemark = ''
              this.$notify({
                title: '成功',
                message: '解除绑定成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
            })
            .finally(() => {
              this.tableLoading = false
            })
        })
        .catch(() => {})
    },

    // 返回
    goBack() {
      this.resolve && this.resolve()
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 下载二维码
    handleDown(command) {
      const params = {}
      params.taskNo = this.filterForm.taskNo
      params.status = command === 'all' ? '' : command
      downWxQrcodeList(params)
        .then(res => {
          this.$alert('二维码导出中，请稍后到数据下载中心进行下载', '提示', {
            confirmButtonText: '确定',
            center: true,
            type: 'success',
            callback: action => {}
          })
        })
        .catch(() => {})
        .finally(() => {})
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .generate-qrcode {
    .content {
      margin-top: 10px;
    }
    /* 搜索*/
    .list-search {
      .el-input {
        width: 40%;
        min-width: 300px;
        max-width: 500px;
        margin-right: 10px;
      }
    }
    /* 筛选 */
    .el-radio + .el-radio {
      margin-left: 0;
    }
    .el-radio {
      margin-right: 10px;
      height: 32px;
      line-height: 32px;
    }
  }
</style>
